<template>
  <view class="page-project-detail">
    <view class="header">
      <view class="title">{{ $t('project.项目详情') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="swiper-wrapper">
      <uni-swiper-dot @clickItem="clickItem" :info="swiperList" :dots-styles="dotsStyle" :current="current" :mode="mode" field="content">
        <swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="true">
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image :src="item.url" alt="" class="swiper-img" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="info-wrapper">
      <view class="title">{{ projectInfo.title }}</view>
      <view class="name">{{ projectInfo.title }} </view>
      <view class="money">
        <view class="label">{{ $t('project.项目金额') }}：</view>
        <view class="value">{{ projectInfo.price }}($)</view>
      </view>
      <view class="commission">
        <view class="label">{{ $t('project.项目提成') }}：</view>
        <view class="value">{{ projectInfo.pencent }}%</view>
      </view>
      <view class="time">
        <view class="label">{{ $t('project.发布日期') }}：</view>
        <view class="value">{{ projectInfo.createdAt }}</view>
      </view>
    </view>
    <view class="progect-doctor">
      <view class="title">{{ $t('project.项目医生介绍') }}</view>
      <view class="doctor-wrapper">
        <view class="doctor-avatar">
          <image :src="`${imgUrl}${projectInfo.doctor.avatar}`" alt="" class="avatar-img" mode="aspectFill" />
          <view class="name">{{ projectInfo.doctor.doctorName }}</view>
        </view>
        <view class="doctor-info">
          <view class="info-item">
            <view class="label">{{ $t('project.职位') }}：</view>
            <view class="value">{{ projectInfo.doctor.profession }}</view>
          </view>
          <view class="info-item">
            <view class="label">{{ $t('project.科室') }}：</view>
            <view class="value">{{ projectInfo.doctor.departments }}</view>
          </view>
          <view class="info-item">
            <view class="label">{{ $t('project.擅长') }}：</view>
            <view class="value">{{ projectInfo.doctor.skilled }}<br />{{ projectInfo.doctor.detail }}</view>
          </view>
        </view>
      </view>
      <view class="desc">
        <view class="label" style="margin-bottom: 20rpx">{{ $t('project.详细介绍') }}：</view>
        <rich-text :nodes="projectInfo.doctor.detail"></rich-text>
      </view>
    </view>
    <view class="footer">
      <view class="footer-item" @click="handleGoHome">
        <image src="~@/static/images/tabbar/home.png" alt="" class="footer-img" mode="aspectFill" />
        <view class="name">{{ $t('project.首页') }}</view>
      </view>
      <view class="footer-item" @click="handleGoCustomer">
        <image src="~@/static/images/tabbar/customer.png" alt="" class="footer-img" mode="aspectFill" />
        <view class="name">{{ $t('project.客服') }}</view>
      </view>
      <view class="btn" @click="handleSubmit">{{ $t('project.预约') }}</view>
    </view>
  </view>
</template>
<script>
  import { projectDetail, projectSubmit } from '@/api/project.js'
  import config from '@/config'

  export default {
    onLoad(option) {
      let { id } = option
      this.id = id
      this.getDetail()
    },
    onPullDownRefresh() {
      this.getDetail()
      uni.stopPullDownRefresh()
    },
    data() {
      return {
        id: '',
        current: 0,
        mode: 'round',
        swiperDotIndex: 0,
        projectInfo: {
          doctor: {}
        },
        swiperList: [
          {
            url: require('@/static/images/index/swiper01.jpg')
          },
          {
            url: require('@/static/images/index/swiper02.jpg')
          },
          {
            url: require('@/static/images/index/swiper03.jpg')
          }
        ],
        dotsStyle: {
          backgroundColor: '#fff',
          color: '#fff',
          selectedBackgroundColor: '#00bebe',
          selectedBorder: '1px #00bebe solid'
        },
        imgUrl: config.imgUrl
      }
    },
    methods: {
      // 返回
      handleBack() {
        // this.$tab.navigateBack()
        this.$tab.switchTab('/pages/project/index')
      },
      //改变
      change(e) {
        this.current = e.detail.current
      },
      // 点击
      clickItem(e) {
        this.swiperDotIndex = e
      },
      // 获取详情
      getDetail() {
        this.$modal.loading('loading', 'loading')
        projectDetail({ id: this.id })
          .then((res) => {
            this.$modal.closeLoading()
            let { data } = res.result
            this.projectInfo = data
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      },
      //首页
      handleGoHome() {
        this.$tab.switchTab('/pages/index')
      },
      //客服
      handleGoCustomer() {
        this.$tab.switchTab('/pages/customer/index')
      },
      //预约
      handleSubmit() {
        this.$modal.loading('loading', 'loading')
        projectSubmit({
          mine_id: this.id
        })
          .then(() => {
            this.$modal.closeLoading()
            this.$modal.msg(this.$t('project.预约成功'))
            setTimeout(() => {
              this.$tab.reLaunch('/pages/index')
            }, 500)
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      }
    }
  }
</script>
<style scoped lang="scss">
  .page-project-detail {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .swiper-wrapper {
      padding: 10px;
      margin-top: 50px;
      .swiper-box {
        height: 150px;
        .swiper-img {
          width: 100vw;
          height: 150px;
          //   background: #d4e7f8;
          border-radius: 20px;
        }
      }
    }
    .info-wrapper {
      padding: 10px;
      margin-top: 10px;
      font-size: 26rpx;
      .title {
        font-size: 18px;
        border-bottom: 1px solid #3ecde2;
        padding-bottom: 10px;
      }
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
        margin-bottom: 5px;
        padding-top: 15px;
      }
      .money,
      .commission,
      .time {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        color: #999;
      }
      .commission,
      .money {
        color: #666;
        .value {
          color: #d3955c;
        }
      }
    }
    .progect-doctor {
      padding: 10px 10px 62px;
      margin-top: 10px;
      font-size: 26rpx;
      // margin-bottom: 20px;
      .title {
        font-size: 18px;
        border-bottom: 1px solid #3ecde2;
        padding-bottom: 10px;
      }
      .doctor-wrapper {
        display: flex;
        padding-top: 20px;
        .doctor-avatar {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 88px;
          min-height: 88px;
          .avatar-img {
            width: 60px;
            height: 60px;
          }
          .name {
            font-size: 24rpx;
            margin-top: 8rpx;
          }
        }
        .doctor-info {
          flex: 1;
          overflow: hidden;
          margin-left: 20rpx;
          .info-item {
            display: flex;
            margin-bottom: 10px;
            font-size: 28rpx;
            &.special {
              flex-direction: column;
            }
            .label {
              //   width: 80px;
              color: #101011;
              white-space: nowrap;
              text-align: left;
            }
            .value {
              flex: 1;
              overflow: hidden;
              color: #999;
            }
          }
        }
      }
      .desc {
        .label {
          //   width: 80px;
          color: #101011;
          white-space: nowrap;
          text-align: left;
        }
        .value {
          flex: 1;
          overflow: hidden;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      width: 100vw;
      height: 62px;
      z-index: 9;
      border-top: 0.5px solid rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      padding: 0 10px;
      background-color: #fff;
      .footer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .footer-img {
          width: 20px;
          height: 20px;
        }
        .name {
          margin-top: 5px;
          font-size: 26rpx;
          color: #999;
        }
        & + .footer-item {
          margin-left: 20px;
        }
      }
      .btn {
        flex: 1;
        overflow: hidden;
        background-color: #31b3b5;
        border-radius: 7px;
        margin-left: 20px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }
  }
</style>
